<template>
    <div class="menu xiaozhucaishui-menu-sb">
        <template v-for="(item, index) in getMenu">
            <el-popover
                v-if="item.list.length > 0"
                :key="index"
                placement="bottom"
                :width="170 * item.length"
                trigger="hover"
                :visible-arrow="false"
                popper-class="xiaozhucaishui-menu-sb-popover"
            >
                <div class="menu-list">
                    <div
                        v-for="i in item.list"
                        :key="i.name"
                        class="menu-item"
                        :class="{
                            'menu-item-active': i.pathName == $route.name,
                        }"
                        @click="goSb(i)"
                    >
                        {{ i.name }}
                    </div>
                </div>
                <div
                    class="menu-title"
                    :class="{ 'menu-active': isActive(item.list) }"
                    slot="reference"
                >
                    {{ item.name }}
                </div>
            </el-popover>
            <nuxt-link
                v-else
                :key="index"
                :to="item.path"
                class="menu-title"
                :class="{ 'menu-active': item.path == $route.path }"
                >{{ item.name }}</nuxt-link
            >
        </template>

        <el-popover
            placement="bottom"
            width="331"
            :offset="0"
            trigger="hover"
            popper-class="myMenu-vip-popper-class"
        >
            <div class="myMenu-vip-popper-main">
                <div class="myMenu-vip-popper-title">
                    <img
                        src="~/assets/images/index/myMenu-vip-popper-title-icon.png"
                        alt="vip"
                    />
                    <span>小竹财税全站通会员权益</span>
                </div>
                <div class="myMenu-popper-no-login-icon">
                    <div class="no-login-icon-item">
                        <img
                            src="~/assets/images/index/no-login-icon-1.png"
                            alt="财税垂直AI"
                        />六大核心权益
                    </div>
                    <div class="no-login-icon-item">
                        <img
                            src="~/assets/images/index/no-login-icon-2.png"
                            alt="100+专家政策解读"
                        />17项细分权益
                    </div>
                    <div class="no-login-icon-item">
                        <img
                            src="~/assets/images/index/no-login-icon-3.png"
                            alt="70+专业提升课"
                        />各类财税工具
                    </div>
                    <div class="no-login-icon-item">
                        <img
                            src="~/assets/images/index/no-login-icon-4.png"
                            alt="1000＋服务商"
                        />被忽略的职场课
                    </div>
                </div>
                <div
                    v-if="!userInfo || userInfo.is_gpt_vip == 0"
                    class="myMenu-vip-popper-button1"
                    @click="vipClick2"
                >
                    开通会员
                </div>
                <div v-else class="myMenu-vip-popper-button2">
                    <div @click="vipClick">续费会员</div>
                    <span
                        >会员到期时间：{{
                            userInfo.gpt_vip_end_time_text
                        }}</span
                    >
                </div>
            </div>
            <nuxt-link
                slot="reference"
                to="/vipcenter"
                class="menu-title"
                :class="{ 'menu-active': '/vipcenter' == $route.path }"
            >
                会员中心
            </nuxt-link>
        </el-popover>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import { logout } from "@/assets/api/indexApi.js";
import bilibiliUserPopover from "@/components/index/bilibiliUserPopover.vue";

function getMunuListIndex(e) {
    if (e == null) return 0;
    let menuIndex = parseInt(e);
    if (menuIndex >= 10) {
        return Math.trunc(menuIndex / 10) - 1;
    } else {
        return menuIndex - 1;
    }
}

export default {
    name: "myMenu",
    components: {
        bilibiliUserPopover,
    },
    props: {
        showButton: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            keyword: "",
            menuSearchIndex: "1",
            userPopoverShow: false,
            PopoverTime: null,

            isActive: function (items) {
                for (let item of items) {
                    if (item.pathName == this.$route.name) return true;
                }
                return false;
            },
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
            menuList: (state) => state.menuList,
            indexHotSearch: (state) => state.indexHotSearch,
            userInfo: (state) => state.userInfo,
            goeasyObj: (state) => state.goeasyObj,
            payVipIndex: (state) => state.payVipIndex,

            logo_color: (state) => state.logo_color,
            nav_color: (state) => state.nav_color,
            back_color: (state) => state.back_color,

            meunListSbPosition: (state) => state.meunListSbPosition,
            menuListSb: (state) => state.menuListSb,
        }),
        getMenu: function () {
            let mp = this.meunListSbPosition["1"];
            let menuList = [];
            if (this.userInfo && this.userInfo.position) {
                mp = this.meunListSbPosition[this.userInfo.position + ""];
            }

            for (let item of mp) {
                menuList.push(this.menuListSb[item]);
            }
            return menuList;
        },
    },
    watch: {
        menuIndex(n, o) {
            this.getMenuSearchIndex(n);
        },
    },
    created() {},
    mounted() {},
    methods: {
        ...mapMutations("common", [
            "setmenuIndex",
            "set_payVipShow",
            "setuserInfo",
            "set_payVipIndex",
        ]),

        vipClick2() {
            this.$router.push({
                path: "/vipcenter",
            });
        },

        xzyClick() {
            this.set_payVipShow({ show: true, index: 2 });
        },
        vipClick() {
            this.set_payVipShow({ show: true, index: 1 });
        },

        // 鼠标移入0.8s后头像
        mouseEnterEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);

            this.PopoverTime = setInterval(() => {
                this.userPopoverShow = true;
                if (this.PopoverTime) clearInterval(this.PopoverTime);
                this.PopoverTime = null;
            }, 300);
        },

        // 鼠标移出头像
        mouseLeaveEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);
            this.PopoverTime = null;
            this.userPopoverShow = false;
        },

        menuItemClick(item) {
            this.setmenuIndex(item.index);
            // this.$router.push({
            //     path: item.path,
            // });
        },

        handleSelect(e) {
            console.log(e);
            return;
            this.setmenuIndex(e);

            this.getMenuSearchIndex(e);

            return;
            if (e == "0") {
                this.$router.push({ path: "/" });
            } else if (e.length > 1) {
                let item = this.menuList[getMunuListIndex(this.menuIndex)].list;
                let i = parseInt(this.menuIndex[1]);
                if (item[i].path != this.$route.fullPath) {
                    this.$router.push({
                        name: item[i].path,
                        params: item[i].params,
                        query: item[i].query,
                    });
                }
            } else if (
                this.menuList[getMunuListIndex(this.menuIndex)].path &&
                this.$route.fullPath !=
                    this.menuList[getMunuListIndex(this.menuIndex)].path
            ) {
                this.$router.push({
                    path: this.menuList[getMunuListIndex(this.menuIndex)].path,
                });
            }
        },

        getMenuSearchIndex(e) {
            if (e == "0" || e == null) return;
            if (e.length > 2 && e[0] == "4") return;
            else this.menuSearchIndex = e;
        },

        goSearch() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
                return;
            }
            // if (!this.keyword && !this.indexHotSearch[this.menuIndex[0]]) {
            //     this.$message({
            //         message: "请输入搜索关键字",
            //         type: "warning",
            //     });
            //     return;
            // }
            this.keyword = this.keyword.trim();
            let keyword = "";
            if (!this.keyword) {
                keyword = this.indexHotSearch[this.menuIndex[0]];
            } else {
                keyword = this.keyword;
            }
            let path = "issue";
            if (this.menuIndex)
                switch (this.menuIndex[0]) {
                    case "1":
                        path = "issue";
                        break;
                    case "2":
                        path = "xiaozhuwenda";
                        break;
                    case "3":
                        path = "policy";
                        break;
                    case "4":
                        path = "norm";
                        break;
                    case "5":
                        path = "xueyuan";
                        break;
                    case "6":
                        path = "newdrygoods";
                        break;
                    case "7":
                        path = "information";
                        break;
                    default:
                        path = "issue";
                }
            // window.location.href = `http://zhusou.xzcs2022.com/search/${path}?q=${this.keyword}`

            keyword = keyword.replace(/%/g, "%25");
            keyword = keyword.replace(/\+/g, "%2B");
            keyword = keyword.replace(/</g, "%253C");
            keyword = keyword.replace(/>/g, "%253E");
            console.log(keyword);
            let url = `https://api.xiaozhucaishui.com/search/${path}?q=${keyword}`;
            if (this.userInfo) url += `&deviceid=${this.userInfo.id}`;
            window.open(url);
            // this.$router.push({
            //     path: "/SearchIndex",
            //     query: { keyword: this.keyword },
            // });
        },

        goIndex() {
            this.$router.push({
                path: "/",
            });
        },

        go(url) {
            this.$router.push({
                path: url,
            });
        },

        goSb(i) {
            console.log(this.$route);
            if (i.noPath) {
                let srt = "小主，我马上催老师起床录课！";
                if (i.name == "快乐驿站")
                    srt = "小主，我马上催技术起床敲代码！";
                this.$alert(srt, "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
            this.$router.push({
                path: i.path,
            });
        },

        //
        logoutconfirm() {
            this.$confirm("是否退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.logout();
            });
        },

        // 退出登录
        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            // localStorage.removeItem("is_show_userdiscountcoupons");
            localStorage.clear();
            this.$router.push({ path: "/" });
            if (this.goeasyObj)
                this.goeasyObj.pubsub.unsubscribe({
                    channel: id,
                    onSuccess: function () {},
                    onFailed: function (error) {},
                });
        },

        // 修改登录弹窗状态
        showLoginTabs() {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
        },

        xzyClick() {
            this.set_payVipShow({ show: true, index: 2 });
        },
        vipClick() {
            this.set_payVipShow({ show: true, index: 1 });
        },
        vipClick2() {
            this.$router.push({
                path: "/vipcenter",
            });
        },

        LookAlert() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/riskdetection",
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            // if (this.userInfo.is_gpt_vip == 0) {
            //     this.$confirm("该功能仅限会员用户使用", "提示", {
            //         confirmButtonText: "成为会员",
            //         cancelButtonText: "再看看",
            //     })
            //         .then(() => {
            //             this.set_payVipShow(true);
            //         })
            //         .catch(() => {});
            //     return;
            // }
            this.$router.push({
                path: "/riskdetection",
            });
            return;
            this.$alert("财税风险检测敬请期待", "提示", {
                confirmButtonText: "确定",
            });
        },
    },
};
</script>

<style lang="scss">
.xiaozhucaishui-menu-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 70px;
    background: #ffffff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    .menu-title {
        height: 80px;
        line-height: 80px;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        cursor: pointer;
        display: block;
        &:hover {
            color: rgba($color: #026beb, $alpha: 0.8);
        }
    }

    .menu-active {
        color: #026beb;
    }
}

.xiaozhucaishui-menu-sb-popover {
    padding: 0;
    border: none;
    .menu-list {
        display: flex;
        align-items: center;
        height: 60px;
        .menu-item {
            height: 60px;
            width: 170px;
            line-height: 60px;
            text-align: center;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            cursor: pointer;
            display: block;

            &:hover {
                background-color: rgba($color: #1c87f3, $alpha: 0.8);
                color: #ffffff;
            }
        }
        .menu-item-active {
            background: #1c87f3;
            color: #ffffff;
            &:hover {
                background-color: rgba($color: #1c87f3, $alpha: 0.8);
            }
        }
    }
}

.myMenu-vip-popper-class {
    width: 331px;
    height: 224px;
    background-image: url(~/assets/images/index/myMenu-vip-popper-class-bj.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px 32px 22px;
    .popper__arrow {
        display: none;
    }
}

.myMenu-vip-popper-main {
    .myMenu-vip-popper-title {
        font-weight: 500;
        font-size: 16px;
        color: #773a0f;
        text-align: center;
        border-bottom: 1px solid rgba(87, 42, 10, 0.2);
        padding-bottom: 3px;
        img {
            width: 49px;
            height: 39px;
        }
        span {
            position: relative;
            bottom: 7px;
            left: -5px;
        }
    }
    .myMenu-popper-no-login-icon {
        margin-top: 23px;
        .no-login-icon-item {
            margin-bottom: 17px;
            font-weight: 350;
            font-size: 14px;
            color: #773a0f;
            text-wrap: nowrap;
        }
        img {
            margin-right: 6px;
        }
    }

    .myMenu-vip-popper-button1 {
        width: 224px;
        height: 34px;
        line-height: 34px;
        background: linear-gradient(90deg, #d3a557 0%, #f0cc8b 92%);
        border-radius: 5px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #773a0f;
        user-select: none;
        cursor: pointer;
        margin: 8px auto 0;
        &:hover {
            opacity: 0.8;
        }
        &:active {
            opacity: 0.9;
        }
    }

    .myMenu-vip-popper-button2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        div {
            width: 104px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: linear-gradient(90deg, #d3a557 0%, #f0cc8b 92%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #773a0f;
            user-select: none;
            cursor: pointer;
            &:hover {
                opacity: 0.8;
            }
            &:active {
                opacity: 0.9;
            }
        }
        span {
            font-weight: 400;
            font-size: 12px;
            color: rgba(119, 58, 15, 0.8);
        }
    }
}
</style>
